<template>
  <!-- 信息录入 -->
  <div class="box">
    <OrderInformation
      :orderNumber="orderNumber"
      :golbalPermissions="golbalPermissions"
    ></OrderInformation>
    <div class="btn_wrap">
      <el-button
        v-if="showOrderRev"
        @click="showDia"
        type="primary"
        size="small"
      >
        修改录入信息</el-button
      >
    </div>
    <div class="enterInfor">
      <table>
        <tr>
          <td rowspan="3" width="150" class="left">客户信息</td>
          <td width="150" class="title">购房人姓名</td>
          <td>{{ showForm.basicBorrowerName }}</td>
          <td width="150" class="title">身份证号码</td>
          <td>{{ showForm.basicBorrowerCard }}</td>
          <td width="150" class="title">联系电话</td>
          <td>{{ showForm.basicBorrowerPhone }}</td>
        </tr>
        <tr>
          <td width="150" class="title">售房人姓名</td>
          <td>{{ showForm.buyName }}</td>
          <td width="150" class="title">身份证号码</td>
          <td>{{ showForm.buyCard }}</td>
          <td width="150" class="title">联系电话</td>
          <td>{{ showForm.buyPhone }}</td>
        </tr>
        <tr v-if="showFormmate">
          <td width="150" class="title">配偶姓名</td>
          <td>{{ showForm.basicBorrowerMateName }}</td>
          <td width="150" class="title">身份证号码 （元）</td>
          <td>{{ showForm.basicBorrowerMateCard }}</td>
          <td width="150" class="title">联系电话</td>
          <td>{{ showForm.basicBorrowerMatePhone }}</td>
        </tr>
      </table>

      <table>
        <tr>
          <td rowspan="3" width="150" class="left">不动产信息</td>
          <td width="150" class="title">抵押人姓名</td>
          <td>{{ showForm.pledgeName }}</td>
          <td width="150" class="title">身份证号码</td>
          <td>{{ showForm.pledgeCard }}</td>
          <td width="150" class="title">联系电话</td>
          <td>{{ showForm.pledgePhone }}</td>
          <td width="150" class="title">不动产地址</td>
          <td>{{ showForm.pledgeHouseAddress }}</td>
        </tr>
        <tr>
          <td width="150" class="title">不动产产权号</td>
          <td>{{ showForm.pledgeHouseNumber }}</td>
          <td width="150" class="title">所属区域</td>
          <td>{{ showForm.pledgeHouseDistrict }}</td>
          <td width="150" class="title">小区名字</td>
          <td>{{ showForm.pledgeHouseName }}</td>
          <td width="150" class="title">建站面积(m²)</td>
          <td>{{ showForm.pledgeHouseArea }}</td>
        </tr>
        <tr>
          <td width="150" class="title">合同成交价(万元)</td>
          <td>{{ showForm.advanceMoney }}</td>
          <!-- <td width="150" class="title">贷款银行</td>
          <td>{{ showForm.pledgeOneBank }}</td>
          <td width="150" class="title">剩余贷款金额(万元)</td>
          <td colspan="3">{{ showForm.surplusMoney }}</td> -->
        </tr>
      </table>
    </div>

    <el-dialog title="修改信息" :visible.sync="dialogVisible" width="1000px">
      <el-form
        class="addInfor"
        label-width="100px"
        size="small"
        :inline="true"
        ref="inforForm"
        :model="form"
        :rules="rules"
      >
        <section class="addInfor">
          <div>
            <el-form-item label="购房人姓名" prop="basicBorrowerName">
              <el-input v-model="form.basicBorrowerName"></el-input>
            </el-form-item>
            <el-form-item label="身份证号码" prop="basicBorrowerCard">
              <el-input v-model="form.basicBorrowerCard"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="basicBorrowerPhone">
              <el-input v-model="form.basicBorrowerPhone"></el-input>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="售房人姓名" prop="buyName">
              <el-input v-model="form.buyName"></el-input>
            </el-form-item>
            <el-form-item label="身份证号码" prop="buyCard">
              <el-input v-model="form.buyCard"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="buyPhone">
              <el-input v-model="form.buyPhone"></el-input>
            </el-form-item>
            <!-- <el-form-item label="婚姻状况" prop="basicBorrowerMarriage">
              <el-select v-model="form.basicBorrowerMarriage">
                <el-option
                  v-for="item in Marriage"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item> -->
          </div>
          <div v-if="showMate">
            <el-form-item label="配偶姓名" prop="basicBorrowerMateName">
              <el-input v-model="form.basicBorrowerMateName"></el-input>
            </el-form-item>
            <el-form-item label="身份证号码" prop="basicBorrowerMateCard">
              <el-input v-model="form.basicBorrowerMateCard"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="basicBorrowerMatePhone">
              <el-input v-model="form.basicBorrowerMatePhone"></el-input>
            </el-form-item>
          </div>
        </section>
        <section class="addInfor">
          <div>
            <el-form-item label="抵押人姓名" prop="pledgeName">
              <el-input v-model="form.pledgeName"></el-input>
            </el-form-item>
            <el-form-item label="身份证号码" prop="pledgeCard">
              <el-input v-model="form.pledgeCard"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="pledgePhone">
              <el-input v-model="form.pledgePhone"></el-input>
            </el-form-item>
            <el-form-item label="不动产地址" prop="pledgeHouseAddress">
              <el-input v-model="form.pledgeHouseAddress"></el-input>
            </el-form-item>
            <el-form-item label="产权号" prop="pledgeHouseNumber">
              <el-input v-model="form.pledgeHouseNumber"></el-input>
            </el-form-item>
            <el-form-item label="所属区域" prop="pledgeHouseDistrict">
              <el-input v-model="form.pledgeHouseDistrict"></el-input>
            </el-form-item>
            <el-form-item label="小区名字" prop="pledgeHouseName">
              <el-input v-model="form.pledgeHouseName"></el-input>
            </el-form-item>
            <el-form-item label="面积(m²)" prop="pledgeHouseArea">
              <el-input v-model="form.pledgeHouseArea"></el-input>
            </el-form-item>
            <el-form-item label="成交价(万元)" prop="advanceMoney">
              <el-input v-model="form.advanceMoney"></el-input>
            </el-form-item>
            <!-- <el-form-item label="贷款银行" prop="pledgeOneBank">
              <el-input v-model="form.pledgeOneBank"></el-input>
            </el-form-item> -->
            <!-- <el-form-item label="余贷款金额" prop="surplusMoney">
              <el-input v-model="form.surplusMoney">
                <template slot="prepend">小写</template>
                <template slot="append">（万元）</template>
              </el-input>
            </el-form-item> -->
          </div>
        </section>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="validataForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import OrderInformation from "@/components/ordinaryMortgage/OrderInformation";
import {
  updaOrdinaryMortForm,
  getordinaryMort
} from "../../../src/assets/js/api";
import { GMTToStr, checkPermiss } from "../../assets/js/utlis";
export default {
  name: "Information",
  created() {
    //获取各数据字典
    this.orderNumber = this.orderNumber = sessionStorage.getItem("orderNumber");
    this.golbalPermissions = localStorage.getItem("permissions").split(",");
    this.getAccInfo();
  },
  components: { OrderInformation },
  data() {
    return {
      orderNumber: "",
      dialogVisible: false,
      showForm: {},
      agencySaveTime: [],
      golbalPermissions: [],
      form: {
        basicBorrowerName: "",
        basicBorrowerCard: "",
        basicBorrowerPhone: "",
        basicBorrowerMarriage: "未婚"
      },
      Marriage: [
        { value: "未婚", label: "未婚" },
        { value: "已婚", label: "已婚" }
      ],
      rules: {
        buyName: [
          { required: true, message: "请输入申请人姓名", trigger: "blur" }
        ],
        buyCard: [
          { required: true, message: "请填写证件号码", trigger: "blur" },
          {
            pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
            message: "证件号码格式有误！",
            trigger: "blur"
          }
        ],
        buyPhone: [
          { required: true, message: "请输入手机号码", trigger: "change" },
          {
            validator: function(rule, value, callback) {
              if (/^1[345789]\d{9}$/.test(value) == false) {
                callback(new Error("手机号格式错误"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ],
        basicBorrowerName: [
          { required: true, message: "请输入申请人姓名", trigger: "blur" }
        ],
        basicBorrowerCard: [
          { required: true, message: "请填写证件号码", trigger: "blur" },
          {
            pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
            message: "证件号码格式有误！",
            trigger: "blur"
          }
        ],
        basicBorrowerPhone: [
          { required: true, message: "请输入手机号码", trigger: "change" },
          {
            validator: function(rule, value, callback) {
              if (/^1[345789]\d{9}$/.test(value) == false) {
                callback(new Error("手机号格式错误"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ]
      }
    };
  },
  computed: {
    showMate: function() {
      if (this.form.basicBorrowerMarriage != "已婚") {
        return false;
      } else {
        return true;
      }
    },
    showFormmate: function() {
      if (this.showForm.basicBorrowerMarriage != "已婚") {
        return false;
      } else {
        return true;
      }
    },
    //修改按钮
    showOrderRev: function() {
      return checkPermiss(
        "business:ordinary:updateForm",
        this.golbalPermissions
      );
    }
  },
  methods: {
    //获取录入信息
    getAccInfo() {
      getordinaryMort(this.orderNumber).then(res => {
        this.showForm = res.data;
        this.form = JSON.parse(JSON.stringify(this.showForm));
      });
    },
    //打开弹窗
    showDia() {
      this.dialogVisible = true;
    },
    //表单验证
    validataForm() {
      this.$refs["inforForm"].validate(valid => {
        if (valid) {
          this.form.orderNumber = this.orderNumber;
          let prductId = parseInt(sessionStorage.getItem("prductId"));
          this.form.productId = prductId;
          //转换日期格式
          if (this.form.acceptTime) {
            this.form.acceptTime = GMTToStr(this.form.acceptTime);
          }
          if (this.agencySaveTime && this.agencySaveTime[0]) {
            this.form.agencyBeginTime = GMTToStr(this.agencySaveTime[0]);
            this.form.agencyEndTime = GMTToStr(this.agencySaveTime[1]);
          }
          updaOrdinaryMortForm(this.form).then(res => {
            if (res.code == 200) {
              this.$message.success(res.message);
              this.dialogVisible = false;
              this.getAccInfo();
            } else {
              this.$message.error(res.message);
            }
          });
        } else {
          this.$message.error("请检查输入的格式");
          return false;
        }
      });
    }
  }
};
</script>
<style scoped type="less">
.addInfor {
  text-align: left;
}
.addInfor ::v-deep.el-form-item__content {
  width: 210px;
  vertical-align: middle;
}
.addInfor ::v-deep.el-date-editor.el-input {
  width: 100%;
}
.addInfor ::v-deep.el-form-item--small.el-form-item {
  margin-bottom: 10px;
}
.addInfor ::v-deep .el-input-group__append {
  padding: 0 0;
}
.btn_wrap {
  text-align: right;
  padding: 5px 0;
}
.enterInfor table {
  width: 100%;
  margin-bottom: 10px;
  word-break: break-all;
}
.enterInfor table {
  border-collapse: collapse;
  table-layout: fixed;
  border: none;
}
.enterInfor table td {
  padding: 5px 0;
  font-size: 14px;
  color: #333333;
  text-align: left;
  padding-left: 10px;
  border: 1px rgb(121, 121, 121) solid;
}
::v-deep .el-range-editor--small.el-input__inner {
  width: 210px;
}
.enterInfor .left {
  font-size: 14px;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
  text-align: center;
  padding: unset;
}
.enterInfor .title {
  background: rgba(59, 157, 248, 0.06);
}
</style>
